<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="card-title">
        <span>邀请奖励</span>
      </div>
      <div>
        <el-alert
          title="邀请有奖！好友通过自己的邀请码注册有奖励，点击下方按钮复制邀请码"
          center
          :closable="false"
          type="success"
          effect="dark"
        >
        </el-alert>
      </div>
      <!-- margin-top设置向上的边距，margin-left设置向左的边距 -->
      <el-button
        type="primary"
        style="margin-top: 5px"
        @click="createCode"
        :disabled="inviteCode.length > 0"
        >生成邀请码</el-button
      >
      <el-input
        v-model="inviteCode"
        class="invite_code"
        style="margin-left: 5px"
        readonly
      ></el-input>
      <div>
        <el-button
          v-clipboard:copy="inviteCode"
          v-clipboard:success="onSuccess"
          v-clipboard:error="onError"
          type="primary"
          style="margin-top: 5px"
          >复制邀请码</el-button
        >
      </div>
      <el-divider></el-divider>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>已邀请名单</span>
        </div>
        <el-table :data="tableData" border stripe style="width: 100%">
          <el-table-column prop="name" label="以邀请用户" width="180">
          </el-table-column>
          <el-table-column prop="registerTime" label="注册时间" width="180">
          </el-table-column>
          <el-table-column prop="award" label="奖励"> </el-table-column>
        </el-table>
      </el-card>
    </el-card>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      // 以邀请的列表
      tableData: [],
      // 邀请码
      inviteCode: "",
    };
  },
  methods: {
    ...mapActions({
      createInviteCode: "user/createInviteCode", // 生成邀请码
      getInviteList: "user/getInviteList", // 获取邀请列表
    }),
    createCode() {
      this.createInviteCode().then((res) => {
        console.log(this.inviteCode)
        this.inviteCode = res.invit_code;
      });
    },
    onSuccess(){
        console.log(this.inviteCode)
        this.$message.success('已复制');
    },
    onError(){
        this.$message.error('复制失败');
    }
  },
  computed:{
    // 拿数据
    ...mapGetters(['invite_code'])
  },
  created(){
    // 刷新页面前获取邀请码，如果不存在的话就为空
    this.inviteCode = this.invite_code || ''
    this.getInviteList().then( res=>{
        this.tableData = res.list
    })
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  .invite_code {
    width: 350px;
  }
}
</style>
